<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../plugins/layui/css/layui.css"/>
    <link rel="stylesheet" href="../../css/normalize.css"/>
    <link rel="stylesheet" href="../../css/fa.css"/>
    <link rel="stylesheet" href="../../css/icon.css"/>
    <link rel="stylesheet" href="../../css/ares_animate.min.css"/>
    <link rel="stylesheet" href="../../css/ares_hover_variant.min.css"/>
    <link rel="stylesheet" href="../../css/ares_reboot.css"/>
    <link rel="stylesheet" href="../../css/app.min.css"/>
    <link rel="stylesheet" href="../../css/iframe.css"/>
    <style>
        .table {
            width: 100%;
            table-layout:fixed
        }

        #schedule-am th,
        #schedule-am td,
        #schedule-pm th,
        #schedule-pm td {
            text-align: center;
            vertical-align: middle;
        }

        #schedule-am tbody td,
        #schedule-pm tbody td {
            height: 80px;
            padding: 0;
        }

        .order-items {
            margin-top: 20px;
        }
        .order-items thead th {
            height: 36px;
        }
        .header-title, .therapist-name {
            background-color: #E9F8FF;
        }

        #schedule-am thead th.header-time-title,
        #schedule-am tbody td{
            width: calc((100% - 80px) / 6);
        }
        #schedule-pm thead th.header-time-title,
        #schedule-pm tbody td{
            width: calc((100% - 80px) / 7);
        }
        .order-items .therapist-name {
            width: 80px;
        }
        .ares-scroll-wrapper-y {
            height: 100px;
        }
        .ares-scroll-wrapper-y>.ares-scroll-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: calc(100% + 17px) !important;
            padding: 13px 15px 15px 0;
        }
        .patient-info {
            display: inline-flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 70px;
            height: 70px;
            flex: 0 0 70px;
            margin: 2px;
            font-size: 12px;
            color: #fff;
        }
    </style>
</head>
<body>
<div class="ares-d-flex ares-justify-content-between tools-type">
    <div class="layui-btn-group"></div>
    <div id="train-status-remark"></div>
</div>

<div class="ares-d-flex ares-justify-content-between ares-align-items-center ares-my">
    <div>
        <button id="prev-day-btn" type="button" class="layui-btn">上一天</button>
        <input type="text" class="layui-input ares-d-inline-block ares-w-auto ares-align-middle" readonly id="schedule-date">
        <button id="next-day-btn" type="button" class="layui-btn">下一天</button>
    </div>

    <div class="color-remark"></div>
</div>

<div class="order-items">
    <b>上午排班</b>
    <table id="schedule-am" class="table" border="1" cellpadding="0" cellspacing="0">
        <thead>
        <tr class="header-title">
            <th class="therapist-name">治疗师</th>
            <th class="header-time-title">08:00~08:30</th>
            <th class="header-time-title">08:35~09:05</th>
            <th class="header-time-title">09:10~09:40</th>
            <th class="header-time-title">09:45~10:15</th>
            <th class="header-time-title">10:20~10:50</th>
            <th class="header-time-title">10:55~11:25</th>
        </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

<div class="order-items">
    <b>下午排班</b>
    <table id="schedule-pm" class="table" border="1" cellpadding="0" cellspacing="0">
        <thead>
        <tr class="header-title">
            <th class="therapist-name">治疗师</th>
            <th class="header-time-title">13:00~13:30</th>
            <th class="header-time-title">13:35~14:05</th>
            <th class="header-time-title">14:10~14:40</th>
            <th class="header-time-title">14:45~15:15</th>
            <th class="header-time-title">15:20~15:50</th>
            <th class="header-time-title">15:55~16:25</th>
            <th class="header-time-title">16:30~17:00</th>
        </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>


<script type="text/javascript" src="../../plugins/layui/layui.js"></script>
<script type="text/javascript" src="../../aresExtends/config/layuiConfig.js"></script>
<script>
    var init;
    layui.use(['laydate', 'utils', 'filters', 'mandyServices', 'layer', 'widget', 'dayjs'], function (laydate, utils, filters, mandyServices, layer, widget, dayjs) {
        var schedule_cache = [],
            $am = $("#schedule-am tbody"),
            $pm = $("#schedule-pm tbody"),
            groupId = '',
            startDate = '';

        init = function () {
            startDate = new Date();
            laydate.render({
                elem: '#schedule-date',
                value: startDate,
                showBottom: false,
                done: function (value, date, endDate) {
                    startDate = new Date(value);
                    getScheduleTable(groupId, startDate);
                }
            });
            getGroups();
            renderTrainStatusRemark();
            renderPatientClassifyColorMark();
        }

        init();

        /**
         * @author: ares
         * @date: 2021/3/29 9:50
         * @description: 切换排班类别
         */
        $(".tools-type>.layui-btn-group").on('click', 'button', function () {
            var $this = $(this),
                activeClass = 'layui-btn-normal';
            $this.addClass(activeClass);
            $this.siblings().removeClass(activeClass);
            groupId = $(this).data('groupId');
            getScheduleTable(groupId, startDate);
        });

        /**
         * @author: ares
         * @date: 2021/3/29 11:00
         * @description: 显示额外信息tip
         */
        $(".order-items").on('mouseenter', '.patient-info', function () {
            var target = $(this),
                info = target.data("info");
            if (info) showExpendInfo(target);
        })
        /**
         * @author: ares
         * @date: 2021/3/29 11:00
         * @description: 隐藏额外信息tip
         */
        $(".order-items").on('mouseleave', '.patient-info', function () {
            layer.closeAll('tips');
        })
        $('#prev-day-btn').on('click',function () {
            var currentDay = $('#schedule-date').val(),
            newDay = dayjs(currentDay).subtract(1, 'day').format('YYYY-MM-DD');
            $('#schedule-date').val(newDay);
            getScheduleTable(groupId, new Date(newDay));
        })
        $('#next-day-btn').on('click',function () {
            var currentDay = $('#schedule-date').val(),
                newDay = dayjs(currentDay).add(1, 'day').format('YYYY-MM-DD');
            $('#schedule-date').val(newDay);
            getScheduleTable(groupId, new Date(newDay));
        })

        /**
         * @author: ares
         * @date: 2021/3/29 11:01
         * @description: 显示排班患者额外信息
         * @param{jquery dom} target   患者对应的dom
         */
        function showExpendInfo(target) {
            var info = target.data("info"),
                $tips = $('<div class="schedule-hover">'
                    + '<p>患者 : '
                    + '<span>' + info.name + '</span>'
                    + '<span class="ares-mx">' + filters.sexFormat(info.sex) + '</span>'
                    + '<span>' + filters.ageFormat(info.birthday) + '</span>'
                    + '</p>'
                    + '<p>病历号 : ' + info.emrNumber + '</p>'
                    + '<p>病区/床位号 : ' + (info.wardBedNumber || '——') + '</p>'
                    + '<p>患者类别 : ' + filters.patientTypeFormat(info.patientType) + '</p>'
                    + '<p>病患类型 : ' + filters.patientClassifyFormat(info.classify) + '</p>'
                    + '<p>主治医生 : ' + info.attendingPhysician + '</p>'
                    + '</div>');
            if (info.prcpType == 1) {
                $tips.find('.schedule-hover').append('<p>评估项目 : ' + info.itemName + '</p>')
            }
            layer.tips($tips.html(), target[0], {tips: 1, time: false});
        }

        /**
         * @author: ares
         * @date: 2021/3/29 9:46
         * @description: 获取治疗组
         */
        function getGroups() {
            mandyServices.mandy_hos_group_not_in().then(function (res) {
                var data = res.data,
                    list = data.treat_groups,
                    $groupTypeBtnsWrap = $(".tools-type>.layui-btn-group");
                $groupTypeBtnsWrap.empty();
                $.each(list, function (idx, val) {
                    var btn = $('<button type="button" class="group-btn physics layui-btn" data-group-id="' + val.id + '">' + val.name + '</button>');
                    $groupTypeBtnsWrap.append(btn);
                })
                $groupTypeBtnsWrap.find("button:first").addClass("layui-btn-normal");
                groupId = data.treat_groups[0].id;
                getScheduleTable(groupId, startDate);
            })
        }

        /**
         * @author: ares
         * @date: 2021/3/26 11:27
         * @description: 渲染病患类型颜色标记
         */
        function renderPatientClassifyColorMark() {
            $('.color-remark').empty().append(widget.createPatientClassifyColorMark());
        }

        /**
         * @author: ares
         * @date: 2021/3/29 9:49
         * @description: 获取排班信息
         * @param{string} groupId
         * @param{string} startDate
         */
        function getScheduleTable(groupId, startDate) {
            $am.empty();
            $pm.empty();
            mandyServices.mandy_get_group_schedule_table(groupId, +new Date(startDate)).then(function (res) {
                var data = res.data;
                schedule_cache = data.listDTO;
                $.each(schedule_cache, function (index, item) {
                    var $tr_am = $("<tr id='am_" + index + "'>"),
                        $td_am = $("<td class='therapist-name'>"),
                        $td0 = $("<td id='tdam_" + index + "_0'><div class='ares-scroll-wrapper-y'><div class='ares-scroll-content'></div></div></td>"),
                        $td1 = $("<td id='tdam_" + index + "_1'><div class='ares-scroll-wrapper-y'><div class='ares-scroll-content'></div></div></td>"),
                        $td2 = $("<td id='tdam_" + index + "_2'><div class='ares-scroll-wrapper-y'><div class='ares-scroll-content'></div></div></td>"),
                        $td3 = $("<td id='tdam_" + index + "_3'><div class='ares-scroll-wrapper-y'><div class='ares-scroll-content'></div></div></td>"),
                        $td4 = $("<td id='tdam_" + index + "_4'><div class='ares-scroll-wrapper-y'><div class='ares-scroll-content'></div></div></td>"),
                        $td5 = $("<td id='tdam_" + index + "_5'><div class='ares-scroll-wrapper-y'><div class='ares-scroll-content'></div></div></td>");
                    $tr_am.append($td_am, $td0, $td1, $td2, $td3, $td4, $td5);
                    var $tr_pm = $("<tr id='pm_" + index + "'>"),
                        $td_pm = $("<td class='therapist-name'>"),
                        $td6 = $("<td id='tdpm_" + index + "_6'><div class='ares-scroll-wrapper-y'><div class='ares-scroll-content'></div></div></td>"),
                        $td7 = $("<td id='tdpm_" + index + "_7'><div class='ares-scroll-wrapper-y'><div class='ares-scroll-content'></div></div></td>"),
                        $td8 = $("<td id='tdpm_" + index + "_8'><div class='ares-scroll-wrapper-y'><div class='ares-scroll-content'></div></div></td>"),
                        $td9 = $("<td id='tdpm_" + index + "_9'><div class='ares-scroll-wrapper-y'><div class='ares-scroll-content'></div></div></td>"),
                        $td10 = $("<td id='tdpm_" + index + "_10'><div class='ares-scroll-wrapper-y'><div class='ares-scroll-content'></div></div></td>"),
                        $td11 = $("<td id='tdpm_" + index + "_11'><div class='ares-scroll-wrapper-y'><div class='ares-scroll-content'></div></div></td>"),
                        $td12 = $("<td id='tdpm_" + index + "_12'><div class='ares-scroll-wrapper-y'><div class='ares-scroll-content'></div></div></td>");
                    $tr_pm.append($td_pm, $td6, $td7, $td8, $td9, $td10, $td11, $td12);
                    $am.append($tr_am);
                    $pm.append($tr_pm);

                    $td_am.text(item.therapistName).attr("id", item.therapistId);
                    $td_pm.text(item.therapistName).attr("id", item.therapistId);

                    if (item.unitDTOs && item.unitDTOs.length) {
                        $.each(item.unitDTOs, function (idx, list) {
                            var unitIndex = list.unitIndex;
                            if (list.is_vacation) {
                                var $vacationRemark = $('<div class="vacation-remark">' + list.vacation_remark + '</div>');
                                //数据是第几个单元格
                                if (unitIndex <= 5) {
                                    $("#tdam_" + index + "_" + unitIndex).css({'color': 'red'}).append($vacationRemark);
                                } else {
                                    $("#tdpm_" + index + "_" + unitIndex).css({'color': 'red'}).append($vacationRemark);
                                }
                            } else if (list.scheduleRecordDTO && list.scheduleRecordDTO.length) {
                                $.each(list.scheduleRecordDTO, function (i, val) {
                                    var isScanned = val.isScanned,
                                        $scanned = $("<i class='fa-qrcode ares-text-green'></i>"),
                                        $patientInfo = $("<div id='" + val.emrId + "' class='patient-info'>"
                                            + "<div class='ares-text-truncate'>"
                                            + "<span class='fa-circle' style='color: " + filters.patientClassifyColorFormat(val.classify) + ";'></span>"
                                            + "<span>" + val.name + "</span>"
                                            + "</div>"
                                            + "<div class='ares-text-truncate'>"
                                            + "<span class='ares-mx-sm'>" + filters.sexFormat(val.sex) + "</span>"
                                            + "<span>" + filters.ageFormat(val.birthday) + "</span>"
                                            + "</div>"
                                            + "</div>");
                                    $patientInfo.data('info', val).css('backgroundColor', filters.trainStatusColorFormat(val.status) || '#f1f1f1');
                                    //是否来源于扫描
//                                    if (isScanned == 1) $patientInfo.prepend($scanned);
                                    //数据是第几个单元格
                                    if (unitIndex <= 5) {
                                        $("#tdam_" + index + "_" + unitIndex).find('.ares-scroll-content').append($patientInfo);
                                    } else {
                                        $("#tdpm_" + index + "_" + unitIndex).find('.ares-scroll-content').append($patientInfo);
                                    }
                                })
                            }
                        })
                    }
                })
            })
        }

        /**
         * @author: ares
         * @date: 2021/4/13 11:31
         * @description: 渲染训练状态标记
         */
        function renderTrainStatusRemark() {
            $('#train-status-remark').empty().append(widget.createTrainStatusRemark());
        }
    })

</script>

</body>
</html>